<template>
  <div>
    <form :model="form" ref="form" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
        First name: <input type="text" v-model="form.username" auto-complete="off" placeholder="账号"><br>
        Last name: <input type="password" v-model="form.password" auto-complete="off" placeholder="密码">
        <!-- <input type="text" v-model="form.verifyCode" auto-complete="off" placeholder="验证码" class="w-150"></input>
        <img :src="verifyUrl" @click="refreshVerify()" class="verify-pos"/> -->
        <button style="width:80%;" @click="login">Login</button>
    </form>
  </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'

    export default {
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                }
            }
        },
        methods: {
            login: function () {
                var self = this;

                axios.post(process.env.API_ROOT + 'user/login', qs.stringify(self.form)).then(function(response) {
                    localStorage.setItem('access_token',response.data);
                    // localStorage.removeItem('access_token');
                    // localStorage.access_token
                    console.log(localStorage);
                });
            }
        }
    }
</script>

<style>
.verify-pos {
	position: absolute;
	right: 100px;
	top: 0px;
}
.card-box {
	padding: 20px;
	/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	margin-bottom: 20px;
	background-color: #F9FAFC;
	margin: 120px auto;
	width: 400px;
	border: 2px solid #8492A6;
}

.title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}

.loginform {
	width: 350px;
	padding: 35px 35px 15px 35px;
}
</style>
